<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model.trim="name"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.number="age"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="onSave">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in student" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="del(index)">删除</button>
            <button @click="amend(item,index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
   return {
    opinion:false,
    name:'',
    age:'0',
    gender:'',
    student: [
     {
      id:1, name:'Tom',age:19,gender:'男'
     },
     {
      id:2,name:'Jack',age:21,gender:'男'
     }
    ],
    editIndex:null
   }
  },
  methods:{
   onSave(){
    if(this.opinion){
     this.student[this.editIndex].name=this.name
     this.student[this.editIndex].age=this.age
     this.student[this.editIndex].gender=this.gender
     this.name = this.gender =''
     this.age = 0
     this.opinion = false
     this.editIndex = null
    }else{
     this.add()
    }
   },
  //tj
    add() {
    this.opinion = false
    if(!this.name || !this.age || !this.gender) {
     return alert('姓名年龄和性别不能为空！')
    }
    let id = this.student[this.student.length - 1].id + 1
    let obj = {
     id,
     name : this.name,
     age : this.age,
     gender : this.gender
    }
    this.student.push(obj)
    this.name =  this.gender = ''
    this.age = 0
   },
   del(index) {
    this.student.splice(index,1)
   },
   amend(cc,i) {
    this.editIndex=i
    this.opinion = true
    this.name = cc.name,
    this.age = cc.age,
    this.gender = cc. gender
   },
  }
}
</script>
